<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html>
    <head>
        <title>HTML5 map DOM render</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            <!--
body {
    margin: 0px;
    padding: 0px;
}

.viewport {
    width: 600px;
    height: 600px;
    overflow: hidden;
}

.tiles-skew-container {
    -webkit-transform: scale(1, 0.82) translate(-200px, -300px);
}

.tiles-container {
    width: 220px;
    height: 180px;
    -webkit-transform: rotate(45deg);
}

.tile-row {
    margin: 0 auto;
    clear: both;
}

.tile {
    width: 20px;
    height: 20px;
    float: left;
}

.tile:hover {
    background: black;
}

.tile1 {
    background: url('1.png');
}

.tile2 {
    background: url('2.png');
}
            -->
        </style>
        <script type="text/javascript">
var Renderer;

Renderer = function () {
    var viewportWidth, viewportHeight, rowsCount, lastContainer,
            containerParent;

    viewportWidth = document.body.clientWidth;
    viewportHeight = document.body.clientHeight;
    document.querySelector('.viewport').style.width = viewportWidth + 'px';
    document.querySelector('.viewport').style.height = viewportHeight + 'px';
    rowsCount = Math.floor((viewportWidth + viewportHeight) / 20 - 1);
    lastContainer = document.querySelector('.tiles-container');
    containerParent = lastContainer.parentNode;
    containerParent.style.webkitTransform = 'scale(1, 0.82) translate(-' +
            (viewportWidth / 3) + 'px, -' + (viewportHeight / 2) + 'px)';

    this.render = function () {
        var container, i, j, row, tile, document, tileCount;
        document = window.document;
        container = '<div class="tiles-container" style="width: ' +
                (viewportWidth * 2 + 20) + 'px; height: ' +
                (viewportHeight * 2 - 20) + 'px;">';
        tileCount = 3;
        for (i = rowsCount; i--;) {
            row = '<div class="tile-row" style="width: ' +
                    20 * tileCount + 'px;">';
            for (j = tileCount; j--;) {
                row += '<div class="tile tile' + (j % 2 + 1) + '"></div>';
            }
            container += row + '</div>';
            tileCount += i < (rowsCount / 2) ? -2 : 2;
        }
        containerParent.innerHTML = container + '</div>';
    };
};

addEventListener('load', function () {
    var renderer, results, i;
    renderer = new Renderer();
    results = [];
    for (i = 20; i--;) {
        setTimeout(function () {
            var start, end;
            start = new Date();
            renderer.render();
            setTimeout(function () {
                end = new Date();
                results.push(end.getTime() - start.getTime());
            }, 0);
        }, 1000 * (i + 1));
    }
    i = setInterval(function () {
        var sum;
        if (results.length < 20) {
            return;
        }
        clearInterval(i);
        sum = 0;
        for (i = 20; i--;) {
            sum += results[i];
        }
        alert('Average rendering time: ' + (sum / 20) + 'ms\nDetails: ' +
                results);
    }, 1000);
}, false);
        </script>
    </head>
    <body>
        <div class="viewport">
            <div class="tiles-skew-container">
                <div class="tiles-container"></div>
            </div>
        </div>
    </body>
</html>
